<template>
	<div class="loginPage">
		<input type="text" class="userName" placeholder="username">
		<input type="text" class="password" placeholder="password">
		<span>登录</span>
		<router-link to="/Register" ><span>注册</span></router-link>
	</div>
</template>


<script>
	export default{
		watch:{
			$route(to, form){
				if(to.fullPath === '/Register')this.$store.dispatch('showLogin', false)
			}
		}
	}

</script>


<style lang="scss" scoped>
	@function rem($px){
		@return ($px/75)+rem;
	}
	
	.loginPage{
		position: absolute;
		left: 50%;
		top:50%;
		width:88%;
		height:rem(600);
		background-color:#fff;
		margin: 0 auto;
		transform:translate(-50%, -50%);
		border-radius:rem(20);
		padding-top: rem(200);
		text-align: center;
		input{
			width: 80%;
			height:rem(70);
			border:1px solid #ddd;
			padding-left: rem(20);
			border-radius: rem(10);
			margin:rem(50) 0;
		}
		
		span{
			display: inline-block;
			width:40%;
			line-height: rem(70);
			text-align: center;
			background-color: #000;
			border:1px solid #ddd;
			color:#fff;
			border-radius: rem(10);
			font-size: rem(32);
		}
	}
</style>